<template>
  <!-- <button class="cs-btn" :class="btnType" :disabled="buttonStatus ? true : false">
    <span class="loadingSection" v-show="buttonStatus"></span>
    <span>{{ btnText }}</span>
  </button> -->
  <el-button class="cs-btn" :class="btnType" :loading="buttonStatus">
    {{ btnText }}
  </el-button>
</template>

<script>
// import { Loading } from 'element-ui'

export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    btnText: {
      type: String,
      require: true
    },
    buttonStatus: {
      type: Boolean,
      default: false
    }
  },
  // data() {
  //   return {
  //     buttonStatus: false
  //   }
  // },
  // watch: {
  //   buttonStatus(newValue) {
  //     console.log(newValue)
  //     console.log(document.querySelector('.cs-btn'))
  //     if (newValue === true) {
  //       document.querySelector('.cs-btn').disabled = true
  //     } else {
  //       document.querySelector('.cs-btn').disabled = false
  //     }
  //   }
  // },
  computed: {
    btnType() {
      if (this.type === 'primary' && this.buttonStatus === true) {
        return 'primary_loading'
      } else if (this.type === 'default' && this.buttonStatus === true) {
        return 'default notAllowClick'
      } else if (this.type === 'search' && this.buttonStatus === true) {
        return 'search notAllowClick'
      } else if (this.type === 'primary') {
        return 'primary'
      } else if (this.type === 'default') {
        return 'default'
      } else if (this.type === 'search') {
        return 'search'
      } else {
        return ''
      }
    }
  },
  mounted() {
    // if (this.buttonStatus) {
    //   Loading.service({
    //     target: '.loadingSection',
    //     spinner: 'el-icon-loading',
    //     customClass: 'loadingIcon'
    //   })
    // }
  }
}
</script>

<style scoped lang="less">
.cs-btn {
  width: 72px;
  height: 32px;
  line-height: 32px;
  border: none;
  font-size: 14px;
  box-sizing: border-box;
  margin-right: 16px;
  padding: 0;
}

.loadingSection {
  display: inline-block;
  width: 20px;
}

/deep/ .el-icon-loading {
  color: #dddddd;
}

.primary {
  background-color: #006eff;
  color: #fff;
}

.default {
  background-color: #fff;
  color: #006eff;
  border: 1px solid #dddddd;
}

.search {
  color: #006eff;
  background: #ffffff;
  border: 1px solid #006eff;
}

.primary_loading {
  background-color: #006eff !important;
  color: #fff !important;
  cursor: not-allowed;
}

.notAllowClick {
  cursor: not-allowed;
}

.primary:focus,
.primary:hover {
  color: #fff;
  background: #59a1ff;
}

.default:focus,
.default:hover {
  color: #409eff;
  background: #ecf5ff;
  border-color: #c6e2ff;
}

.search:focus,
.search:hover {
  color: #409eff;
  background: #ecf5ff;
  border-color: #c6e2ff;
}
</style>
